<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const jumpPage = () => {
  uni.navigateTo({
    url: '/pages/commodity/search'
  })
}
const emits = defineEmits(['uploadSearch', 'clickPhoto'])
const upload = () => {
  emits('clickPhoto')
}
</script>

<template>
  <view class="top-search">
    <view class="left" @click="jumpPage">
      <image style="width: 20px" mode="widthFix" src="@/static/Search.png"></image>
      <fui-input
        disabled
        :borderBottom="false"
        :placeholder="t('home.searchForProduct')"
      ></fui-input>
      <!-- <image style="width: 24px;" mode="widthFix" src="@/static/camera.png"></image> -->
    </view>
    <view class="screen" @click="upload">
      <image style="width: 20px" mode="widthFix" src="@/static/camera.png"></image>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.top-search {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    width: calc(100% - 68px);
    padding: 0 15px;
  }

  .screen {
    height: 48px;
    width: 48px;
    justify-content: center;
  }

  .left,
  .screen {
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 8.53px 17.07px 0px rgba(0, 0, 0, 0.04),
      0px 1.71px 5.12px 0px rgba(0, 0, 0, 0.04), 0px 0px 0.85px 0px rgba(0, 0, 0, 0.04);
  }
}
</style>
